<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<!--Handlebar template for the layout of the question-->
	<script id="question-layout" type="text/x-handlebars-template">
		<li  class="question-item" id="question{{generateQuestionId}}" style="padding-top:15px;">
		          <div class="container" style="border:1px;border-style:solid;background-color:#EEEEEE">
		           <div class="row">
		              <div class="col-md-4 question-number">
		                 <span>Question Number {{currentQuestionId}}</span>
		              </div>
		               <div class="col-md-4">
		                 
		              </div>
		              <div class="pull-right">
		                <img class="remove-question" src="../../assets/img/error.png"/>
		              </div>  
		           </div>
		            <textarea id="questionContent{{randomId}}" class="question-content"></textarea>
		           <br>
		            <div class="row">
		             <div class="control-group">
		                <label class="control-label" for="noOfOptions">No of Options:</label>
		                  <div class="controls" id="noOfOptions">
		                    <select class="select-options">
		                      <option value="0" selected="selected">Choose...</option>
		                      <option value="2">2</option>
		                      <option value="3">3</option>
		                      <option value="4">4</option>
		                      <option value="5">5</option>
		                    </select> 
		                  </div>
		              </div>
		           </div>
		           <div class="row">
		              <p>
		                <label>Answer Type:</label>
		                <span style="margin:5px">
		                  <input type="radio" id="singleAnswerType" class="answer-type"  data-type="SingleSelect" checked name="answerType{{currentQuestionId}}">Single Choice
		                  <input type="radio" id="multiAnswerType" class="answer-type" data-type="MultiSelect" name="answerType{{currentQuestionId}}">
		                  Multiple Choice
		                 </span> 
		              </p>
		           </div>
		           <br>
		           <div class="row">
		             <div class="control-group inline">
		                <label class="control-label" for="correctAnswer">Correct Answer:</label>
		                  <div class="controls" id="selectCorrectAnswer">
		                  </div>
		              </div>
		           </div>
		           <br>
		           <br>
		           <div class="row"> 
		             <div class="control-group inline">
		                <div class="controls">
		                  <button type="button" data-code="0" class="btn btn-info show-hide-options" style="margin-left:2px">Show/Hide Options</button>
		                </div>
		              </div>
		           </div>
		
		           <div class="options-div" class="row">
		             <ul class="options-list" style="padding:5px" >
		             </ul>
		           </div>
					  
					 <div class="row"> 
						<label class="control-label" for="noOfOptions">Solution</label>
						<textarea class="solution" style="width: 98%; height: 150px;"></textarea>
		             </div>
	
		           </div>  
		        </li>
	</script>

	<script id="option-layout" type="text/x-handlebars-template">
		<li class="option-item">
		          <div class="row">
		            <div class="col-md-4 option">
		               <span></span>
		            </div>
		          </div>
		          <textarea class="option-content" style="width: 98%; height: 150px;"></textarea>
		          <br>
		        </li>
	</script>
</head>

<body>

	<div>

		<div class="row">
			<div class="control-group" style="min-height: 50px;">
				<div class="controls">
					<button type="button" class="btn btn-success add-question" style="margin-left: 2px">Add Question</button>
					<button type="button" class="btn btn-info save-questions" style="margin-left: 2px">Save</button>
					<button type="button" class="btn btn-error" style="margin-left: 2px">Cancel</button>
				</div>
			</div>
		</div>

		<div class="row">
			<ul class="questions-list">
			</ul>
		</div>

	</div>

</body>

</html>